<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>得到DOM对象</h1>
    <p>DOM对象：Doucument Object Model（文档对象模型），可以简单的理解HTML中的一个标签就是一个DOM对象，DOM对象用于描述HTML标签。</p>
    <p class="p1">1</p>
    <p class="p1" id="p1">2</p>
    <h2>传统getElement(s)ByXXX方法</h2>
    <button onclick="getByClassName()">通过class得到DOM对象数组</button>
    <button onclick="getByTagName()">通过标签名得到DOM对象数组</button>
    <button onclick="getById()">通过id得到第一个DOM对象</button>
    <h2>新的通过选择器获取的方法</h2>
    <button onclick="doQuerySelector()">通过选择器，获取第一个匹配的DOM对象</button>
    <button onclick="doQuerySelectorAll()">通过选择器，获取所有匹配的DOM对象数组</button>
    <script>
        function getByClassName() {
            let ps = document.getElementsByClassName("p1");
            for (let v of ps) {
                console.log(v);
            }
        }

        function getByTagName() {
            let ps = document.getElementsByTagName("p");
            for (let v of ps) {
                console.log(v);
            }
        }

        function getById() {
            let p = document.getElementById("p1");
            console.log(p);
        }

        function doQuerySelector() {
            let p = document.querySelector("p");
            console.log(p);
        }

        function doQuerySelectorAll() {
            let ps = document.querySelectorAll("p");
            for (let v of ps) {
                console.log(v);
            }
        }

    </script>
</body>
</html>